<template>
  <div>
    <el-row>
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
        添加门店
      </el-button>

    </el-row>
    <el-table :data="tableData.filter((item, i) => i >= (page - 1) * limit && i < page * limit)" border
      style="width: 100%" current-row-key="bannerid">
      <el-table-column label="序号" width="180" max-height="50">
        <template #default="prop">
          {{ prop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="门店图片" width="180" max-height="50">
        <template #default="prop">
          <img :src="prop.row.img" alt="">
        </template>
      </el-table-column>
      <el-table-column label="店名" :fit="false" max-height="50">
        <template #default="prop">
          <div style="overflow: hidden; max-height: 69px;">
            {{ prop.row.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="门店地址" max-height="50">
        <template #default="prop">
          <div>
            {{ prop.row.address }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="营业时间" max-height="50">
        <template #default="prop">
          <div>
            {{ prop.row.time}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" max-height="50">
        <template #default="prop">
          <div>
            {{ prop.row.name}}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" max-height="50">
        <template #default="{ row }">
          <div>
            <el-button size="mini" type="danger">删除</el-button>
            <el-button size="mini" type="primary">编辑</el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>
    <div style="text-align: center;">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="page"
        :page-size.sync="limit">
      </el-pagination>
      <el-drawer title="添加轮播图" :visible.sync="drawer" :with-header="false">
        <Form></Form>
      </el-drawer>
    </div>

  </div>
</template>

<script>
import Form from './form.vue'
export default {
  components: {
    Form
  },
  data() {
    return {
      tableData: [
        {
          img:'https://img0.baidu.com/it/u=1618563077,500052402&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=720',
          title:'七鲜家万佳东湖店',
          address:'河北省唐山市丰南区文化大街216号',
          time:'8:00-20:30',
          name:'132123223123'
        },
        {
          img:'https://img0.baidu.com/it/u=1618563077,500052402&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=720',
          title:'七鲜超市天津K11店',
          address:'天津市辖区滨海新区新城西路16号',
          time:'10:00-21:30',
          name:'169434503246'
        },
        {
          img:'https://img0.baidu.com/it/u=1618563077,500052402&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=720',
          title:'七鲜超市天津金隅嘉品店',
          address:'天津市辖区滨海新区杭州道增1195号',
          time:'10:00-21:30',
          name:'192234303246'
        },
        {
          img:'https://img0.baidu.com/it/u=1618563077,500052402&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=720',
          title:'七鲜超市天津宝龙店',
          address:'天津市辖区滨海新区新区新港1813号',
          time:'8:00-20:30',
          name:'172034505246'
        },
        {
          img:'https://img0.baidu.com/it/u=1618563077,500052402&fm=253&fmt=auto&app=120&f=JPEG?w=1080&h=720',
          title:'七鲜超市天津天河城店',
          address:'天津市辖区和平区和平路263号',
          time:'9:00-21:30',
          name:'120230383246'
        },
      ],
      total: 0,
      page: 1,
      limit: 15,
      drawer: false,
      img: '',
      link: '',
      alt: ''
    }
  },
  created() {
  
  },
  methods: {
   

  }
}
</script>

<style lang="scss" scoped>
img {
  display: block;
  max-height: 69px;
  max-width: 180px;
}
</style>